import React, { Component } from 'react'
import {
    Card,
    List,
    Typography,
    message
} from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'

import './index.css'
import LinkButton from '../../../components/link-button'
import {BASE_IMG_URL} from '../../../utils/constants'
import {reqProductsName} from '../../../api'

const {Item} = List
// 详情页ProductDetail
export default class ProductDetail extends Component {

    state = {
        name1: '',
        name2: '',
    }

    async componentDidMount () {
        const {categoryId, pcategoryId} = this.props.location.state
        if (pcategoryId === '0') {
            // 一级分类下的商品
            const reponse = await reqProductsName(categoryId)
            const result = reponse.data
            if (result.status === 0) {
                const {name} = result.data
                this.setState({name1: name})
            } else {
                message.error('获取分类信息失败')
            }
        } else {
            // 二级分类下的商品,一次发送两个请求，都成功了才处理
            const reponse = await Promise.all([reqProductsName(pcategoryId), reqProductsName(categoryId)])
            const result1 = reponse[0].data
            const result2 = reponse[1].data
            if (result1.status === 0 && result2.status === 0) {
                this.setState({
                    name1: result1.data.productName,
                    name2: result2.data.productName
                })
            } else {
                message.error('获取分类信息失败')
            }

        }
        // reqProducts()
    }

    render() {

        // 获取商品数据        
        const {productName, productDesc, price, detail, image} = this.props.location.state

        // 标题
        const title = (
            <span>
                <LinkButton onClick={() => this.props.history.goBack()}>
                    <ArrowLeftOutlined style={{marginRight: 5, fontSize: 16}}/>
                </LinkButton>
                <span>商品详情</span>
            </span>
        )

        return (
            <Card title={title} style={{ width: 1680 ,height: 780}}>
                <List>
                    <Item>
                        <Typography.Text className="left-label">商品名称：</Typography.Text> {productName}
                    </Item>
                    <Item>
                        <Typography.Text className="left-label">商品描述：</Typography.Text> {productDesc}
                    </Item>
                    <Item>
                        <Typography.Text className="left-label">商品价格：</Typography.Text> {price}
                    </Item>
                    <Item>
                        <Typography.Text className="left-label">商品分类：</Typography.Text> {this.state.name1} {this.state.name2 ? '-->' + this.state.name2 : ''}
                    </Item>
                    <Item>
                        <Typography.Text className="left-label">商品图片：</Typography.Text>
                        {
                            image !== null ? <img key={image} className="product-img" src={BASE_IMG_URL + image} alt="imh"/> : <span></span>
                        }
                    </Item>
                    <Item>
                        {/* <Typography.Text className="left-label">商品详情：</Typography.Text> */}
                        <span dangerouslySetInnerHTML={{__html: detail}}></span>
                    </Item>
                        
                </List>
            </Card>
        )
    }
}
